<template>
  <div class="data-settings space-y-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-foreground mb-2 flex items-center">
        <i class="i-mdi-database mr-3 w-6 h-6" />
        {{ t('settings.data.title') }}
      </h1>
      <p class="text-muted-foreground">{{ t('settings.data.description') }}</p>
    </div>

    <!-- 存储信息 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-harddisk mr-2 w-5 h-5" />
        {{ t('settings.data.storage') }}
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-muted/20 rounded-lg p-4 text-center">
          <i class="i-mdi-chat w-8 h-8 text-primary mx-auto mb-2" />
          <div class="text-2xl font-bold text-foreground">{{ storageInfo.chatData }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.data.storageInfo.chatData') }}</div>
        </div>

        <div class="bg-muted/20 rounded-lg p-4 text-center">
          <i class="i-mdi-file-document w-8 h-8 text-primary mx-auto mb-2" />
          <div class="text-2xl font-bold text-foreground">{{ storageInfo.documents }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.data.storageInfo.documents') }}</div>
        </div>

        <div class="bg-muted/20 rounded-lg p-4 text-center">
          <i class="i-mdi-image w-8 h-8 text-primary mx-auto mb-2" />
          <div class="text-2xl font-bold text-foreground">{{ storageInfo.media }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.data.storageInfo.media') }}</div>
        </div>

        <div class="bg-muted/20 rounded-lg p-4 text-center">
          <i class="i-mdi-cog w-8 h-8 text-primary mx-auto mb-2" />
          <div class="text-2xl font-bold text-foreground">{{ storageInfo.settings }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.data.storageInfo.settings') }}</div>
        </div>
      </div>

      <div class="mt-6 p-4 bg-info/10 border border-info/20 rounded-lg">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <i class="i-mdi-information w-5 h-5 text-info mr-2" />
            <span class="text-sm font-medium text-foreground">{{ t('settings.data.storageInfo.total') }}</span>
          </div>
          <span class="text-sm font-bold text-foreground">{{ storageInfo.total }}</span>
        </div>
        <div class="mt-2">
          <div class="w-full bg-muted rounded-full h-2">
            <div class="bg-info h-2 rounded-full" :style="{ width: storageInfo.usagePercent + '%' }"></div>
          </div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>{{ t('settings.data.storageInfo.used') }} {{ storageInfo.usagePercent }}%</span>
            <span>{{ t('settings.data.storageInfo.remaining') }} {{ 100 - storageInfo.usagePercent }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据管理 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-folder-cog mr-2 w-5 h-5" />
        {{ t('settings.data.management') }}
      </h2>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-foreground mb-2">{{ t('settings.data.dataPath') }}</label>
          <div class="flex items-center space-x-2">
            <input
              v-model="settings.dataPath"
              type="text"
              readonly
              class="flex-1 px-3 py-2 border border-input rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" />
            <button
              class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
              @click="selectDataPath">
              {{ t('settings.data.selectPath') }}
            </button>
            <button
              class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
              @click="openDataFolder">
              {{ t('settings.data.openFolder') }}
            </button>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-foreground mb-2">
              {{ t('settings.data.autoCleanDays') }}: {{ settings.autoCleanDays }} {{ t('time.days') }}
            </label>
            <input
              v-model.number="settings.autoCleanDays"
              type="range"
              min="7"
              max="365"
              step="7"
              class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider" />
            <div class="flex justify-between text-xs text-muted-foreground mt-1">
              <span>7{{ t('time.days') }}</span>
              <span>365{{ t('time.days') }}</span>
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-foreground mb-2">
              {{ t('settings.data.cacheLimit') }}: {{ settings.cacheLimit }}MB
            </label>
            <input
              v-model.number="settings.cacheLimit"
              type="range"
              min="100"
              max="5000"
              step="100"
              class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider" />
            <div class="flex justify-between text-xs text-muted-foreground mt-1">
              <span>100MB</span>
              <span>5GB</span>
            </div>
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.data.autoClean') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.data.autoCleanDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.autoClean" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div class="flex gap-2 pt-2">
          <button
            class="px-4 py-2 bg-warning text-warning-foreground rounded-lg hover:bg-warning/90 transition-colors"
            @click="clearCache">
            <i class="i-mdi-broom mr-2 w-4 h-4" />
            {{ t('settings.data.clearCache') }}
          </button>
          <button
            class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
            @click="compactDatabase">
            <i class="i-mdi-database-refresh mr-2 w-4 h-4" />
            {{ t('settings.data.compactDatabase') }}
          </button>
        </div>
      </div>
    </div>

    <!-- 备份与恢复 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-backup-restore mr-2 w-5 h-5" />
        {{ t('settings.data.backup') }}
      </h2>

      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.data.autoBackup') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.data.autoBackupDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.autoBackup" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div v-if="settings.autoBackup" class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-foreground mb-2">{{
              t('settings.data.backupFrequency')
            }}</label>
            <select
              v-model="settings.backupFrequency"
              class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              <option value="daily">{{ t('settings.data.frequency.daily') }}</option>
              <option value="weekly">{{ t('settings.data.frequency.weekly') }}</option>
              <option value="monthly">{{ t('settings.data.frequency.monthly') }}</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-foreground mb-2">{{
              t('settings.data.backupRetention')
            }}</label>
            <input
              v-model.number="settings.backupRetention"
              type="number"
              min="1"
              max="30"
              class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" />
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-foreground mb-2">{{ t('settings.data.backupPath') }}</label>
          <div class="flex items-center space-x-2">
            <input
              v-model="settings.backupPath"
              type="text"
              readonly
              class="flex-1 px-3 py-2 border border-input rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" />
            <button
              class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
              @click="selectBackupPath">
              {{ t('common.selectFile') }}
            </button>
          </div>
        </div>

        <div class="flex gap-2 pt-2">
          <button
            class="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
            @click="createBackup">
            <i class="i-mdi-content-save mr-2 w-4 h-4" />
            {{ t('settings.data.createBackup') }}
          </button>
          <button
            class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
            @click="restoreBackup">
            <i class="i-mdi-restore mr-2 w-4 h-4" />
            {{ t('settings.data.restoreBackup') }}
          </button>
          <button
            class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
            @click="exportData">
            <i class="i-mdi-export mr-2 w-4 h-4" />
            {{ t('settings.data.exportData') }}
          </button>
        </div>

        <!-- 备份历史 -->
        <div v-if="backupHistory.length > 0" class="mt-6">
          <h3 class="text-sm font-medium text-foreground mb-3">{{ t('settings.data.backupHistory') }}</h3>
          <div class="space-y-2 max-h-40 overflow-y-auto">
            <div
              v-for="backup in backupHistory"
              :key="backup.id"
              class="flex items-center justify-between p-3 border border-border rounded-lg text-sm">
              <div class="flex items-center">
                <i class="i-mdi-archive w-4 h-4 text-primary mr-2" />
                <div>
                  <div class="font-medium text-foreground">{{ backup.name }}</div>
                  <div class="text-muted-foreground">{{ backup.date }} • {{ backup.size }}</div>
                </div>
              </div>
              <div class="flex items-center space-x-2">
                <button
                  class="px-2 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
                  @click="restoreSpecificBackup(backup)">
                  {{ t('common.restore') }}
                </button>
                <button
                  class="px-2 py-1 text-xs bg-error text-error-foreground rounded hover:bg-error/90 transition-colors"
                  @click="deleteBackup(backup)">
                  {{ t('common.delete') }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐私设置 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-shield-account mr-2 w-5 h-5" />
        {{ t('settings.data.privacy') }}
      </h2>

      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.data.dataCollection') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.data.diagnostics') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.dataEncryption" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.data.analytics') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.data.analyticsDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.anonymousStats" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.data.crashReports') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.data.crashReportsDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.crashReports" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div class="pt-4 border-t border-border">
          <button
            class="px-4 py-2 bg-error text-error-foreground rounded-lg hover:bg-error/90 transition-colors"
            @click="clearAllData">
            <i class="i-mdi-delete-forever mr-2 w-4 h-4" />
            {{ t('settings.data.clearCache') }}
          </button>
          <p class="text-xs text-muted-foreground mt-2">
            {{ t('settings.data.clearCacheDescription') }}
          </p>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="flex gap-3 pt-4">
      <button
        class="px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
        @click="saveSettings">
        {{ t('common.save') }}
      </button>
      <button
        class="px-6 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
        @click="resetSettings">
        {{ t('common.reset') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { t } from '@/i18n';

// 存储信息
const storageInfo = ref({
  chatData: '156MB',
  documents: '89MB',
  media: '234MB',
  settings: '12MB',
  total: '491MB',
  usagePercent: 65
});

// 备份历史
const backupHistory = ref([
  {
    id: 1,
    name: '自动备份_20241201',
    date: '2024-12-01 10:30',
    size: '145MB'
  },
  {
    id: 2,
    name: '手动备份_20241128',
    date: '2024-11-28 15:45',
    size: '132MB'
  },
  {
    id: 3,
    name: '自动备份_20241125',
    date: '2024-11-25 10:30',
    size: '128MB'
  }
]);

// 设置数据
const settings = ref({
  dataPath: '/Users/username/AppData/Joythink-AI',
  autoCleanDays: 30,
  cacheLimit: 1000,
  autoClean: true,
  autoBackup: true,
  backupFrequency: 'weekly',
  backupRetention: 5,
  backupPath: '/Users/username/Documents/Backups',
  dataEncryption: true,
  anonymousStats: false,
  crashReports: true
});

// 选择数据路径
const selectDataPath = () => {
  console.log('选择数据存储路径');
  // 这里可以调用文件选择对话框
};

// 打开数据文件夹
const openDataFolder = () => {
  console.log('打开数据文件夹');
  // 这里可以调用系统文件管理器
};

// 选择备份路径
const selectBackupPath = () => {
  console.log('选择备份存储路径');
  // 这里可以调用文件选择对话框
};

// 清理缓存
const clearCache = () => {
  if (confirm('确定要清理所有缓存数据吗？')) {
    console.log('清理缓存');
    alert('缓存已清理');
  }
};

// 压缩数据库
const compactDatabase = () => {
  console.log('压缩数据库');
  alert('数据库压缩完成');
};

// 创建备份
const createBackup = () => {
  console.log('创建备份');
  alert('备份创建成功');
};

// 恢复备份
const restoreBackup = () => {
  console.log('恢复备份');
  // 这里可以打开文件选择对话框
};

// 导出数据
const exportData = () => {
  console.log('导出数据');
  alert('数据导出成功');
};

// 恢复特定备份
const restoreSpecificBackup = (backup: any) => {
  if (confirm(`确定要恢复备份 "${backup.name}" 吗？`)) {
    console.log('恢复备份:', backup);
    alert('备份恢复成功');
  }
};

// 删除备份
const deleteBackup = (backup: any) => {
  if (confirm(`确定要删除备份 "${backup.name}" 吗？`)) {
    const index = backupHistory.value.findIndex((b) => b.id === backup.id);
    if (index > -1) {
      backupHistory.value.splice(index, 1);
    }
  }
};

// 清除所有数据
const clearAllData = () => {
  if (confirm('警告：此操作将永久删除所有数据，无法恢复。确定要继续吗？')) {
    if (confirm('请再次确认：您真的要删除所有数据吗？')) {
      console.log('清除所有数据');
      alert('所有数据已清除');
    }
  }
};

// 保存设置
const saveSettings = () => {
  console.log('保存数据设置:', settings.value);
  alert('数据设置已保存');
};

// 重置设置
const resetSettings = () => {
  if (confirm('确定要重置所有数据设置吗？')) {
    settings.value = {
      dataPath: '/Users/username/AppData/Joythink-AI',
      autoCleanDays: 30,
      cacheLimit: 1000,
      autoClean: true,
      autoBackup: true,
      backupFrequency: 'weekly',
      backupRetention: 5,
      backupPath: '/Users/username/Documents/Backups',
      dataEncryption: true,
      anonymousStats: false,
      crashReports: true
    };
    console.log('数据设置已重置');
  }
};
</script>

<style scoped>
.data-settings {
  max-width: 1000px;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: hsl(var(--primary));
  cursor: pointer;
}

.slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: hsl(var(--primary));
  cursor: pointer;
  border: none;
}
</style>
